<template>
    <div>
        <Card :bordered="false" dis-hover>
        <Form inline class="ivu-mb">
            <FormItem class="ivu-mb-0">
      <RadioGroup v-model="patientDate" type="button">
            <Radio label="today">日</Radio>
            <Radio label="sevenDay">周</Radio>
            <Radio label="month">月</Radio>
        </RadioGroup>
        </FormItem>
        <FormItem class="ivu-mb-0">
        <DatePicker type="daterange" v-width="'100%'" v-model="data.date" placeholder="日期选择" element-id="date" />
        </FormItem>
        <FormItem class="ivu-mb-0">
         <Select v-model="model2" style="width:200px">
         <Option v-for="item in postList" :value="item.value" :key="item.value"> {{ item.label }}</Option>
         </Select>
        </FormItem>
        </Form>
            <Table :columns="columns" :data="data" :loading="loading" border show-summary>
            </Table>
        </Card>
    </div>
</template>

<script>
    export default {
        name: 'index',
        data () {
            return {
                loading: true,
                patientDate: 'today',
                date: '',
                model2: '',
                postList: [
                    {
                        value: '医助',
                        label: '医助'
                    },
                    {
                        value: '客服',
                        label: '客服'
                    }
                ],
                columns: [
                    {
                        title: '人员',
                        key: 'person',
                        width: 118
                    },
                    {
                        title: '诊室',
                        key: 'room',
                        width: 80
                    },
                    {
                        title: '新增',
                        key: 'add',
                        width: 80
                    },
                    {
                        title: '预到',
                        key: 'pre',
                        width: 90
                    },
                    {
                        title: '过期未到',
                        key: 'overdue',
                        width: 125
                    },
                    {
                        title: '已回访',
                        key: 'returnVisit',
                        width: 125
                    },
                    {
                        title: '过期未回访',
                        key: 'overdueReturn',
                        width: 118
                    },
                    {
                        title: '复诊人数',
                        key: 'further'
                    }
                ],
                data: []
            }
        },
        mounted () {
            const data = [];
            setTimeout(() => {
                for (let i = 1; i < 10; i++) {
                    data.push({
                        key: i,
                        person: '人员' + i,
                        room: i + '诊',
                        add: Math.round(Math.random() * 50),
                        pre: Math.round(Math.random() * 50),
                        overdue: Math.round(Math.random() * 100),
                        returnVisit: Math.round(Math.random() * 100),
                        overdueReturn: Math.round(Math.random() * 100),
                        further: Math.round(Math.random() * 50)
                    });
                }
                this.data = data;
                this.loading = false;
            }, 1000)
        },
        methods: {
            handleVisitDetail () {
                this.returnVisitDetail = true;
            }
        }
    }
</script>
